<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" name="viewport" content="width=device-width">
	<title>乘法口诀表</title> 
<script src="js/jquery-3.3.1.min.js">
</script>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
   background-color: rgb(255, 99, 71);
}
 
.flex-item  {
    /*background-color: cornflowerblue;*/
    width: 100%;
    height: 100%;
   /* margin: 10px;*/
}
input{
  height:40px;
  width:40%;
  color:green;font-size:16px;
  }
img{
	padding-top: 20px;
	height:50px;
}
</style>
</head>
<body>
<div class="flex-container">
	<div id="onemen1" class="flex-item">乘法口诀表</div>
	<div  class="flex-item">
		<h1>
			<input  type='number' id='num1' min='0' max='81'>
			<input  id="button" type="submit" value="确认">
			<!-- <input type='number' id='num2' min='0' max='9'> -->
			
		</h1>
	</div>

	<div class="flex-item">
		<img id="result"  src=''>
	</div>
		<!-- <div id='result' class="flex-item"></div> -->

</div>


<div id="answer"><h1>点我查看答案</h1></div>
<div id="next"><h1 style='background-color:Orange;'>下一题</h1></div>
<div id="stat"><h1 style='background-color:green;'>1</h1></div>
<div id='achievement'></div>
<script>
	var num=0;
	var cf1=0;
	var cf2=0;
	var gs=0;
	var anw_error=0;
	var anw_sucess=0;
	var chengji=0;
	var anw=0;
	function cf(){
			cf1=Math.floor(7*Math.random()+3);
			cf2=Math.floor(7*Math.random()+3);
		var cf3=0;
		if (cf1>cf2){cf3=cf1;cf1=cf2;cf2=cf3;}
			gs=cf1+'x'+cf2+'='
			anw=cf1*cf2

		$("#onemen1").html("<h1 style='background-color:rgb(255, 99, 71);'>"+gs+"</h1>");
		$("#answer").html("<h1>点我查看答案</h1>");
		$("#stat").html("<h1 style='background-color:rgb(255, 99, 71);'>做题数："+num+"错题数："+anw_error+"</h1>");

		$("#answer").click(function(){
		    $("#answer").html("<h1 style='background-color:MediumSeaGreen;'>"+anw+"</h1>");
		})
		num += 1
	}
	$("#num1").val("")
	$("#result").hide()
	cf()
	$("#next").click(function(){
		$("#result").hide()
		$("#num1").val("")
		if(num == 10){
			anw_sucess=anw_sucess*10
			$("#stat").html("<h1 style='background-color:rgb(255, 99, 71);'>做题数："+num+"错题数："+anw_error+"</h1>");
			$("#achievement").html("<h1 style=background-color:green;>成绩："+anw_sucess+"</h1>")
			$("#next").hide()

		}else{
			cf();
			$("#button").show()
			$("#next").hide()
		}
	    
	})
	$("#button").click(function(){
		// var banw=$("#num1").val()+$("#num2").val()
		var banw=$("#num1").val()
		if (banw == anw){
			// $("#result").html("<h1 style=background-color:green;>正确！</h1>")
			$("#result").attr("src","img/dui.png")
			anw_sucess+=1
		}else{
			// $("#result").html("<h1 style=background-color:red;>错误!!!</h1>")
			$("#result").attr("src","img/cuo.png")
			anw_error +=1
		}
		$("#result").show()
		$("#button").hide()
		$("#next").show()
	    
	})
</script>

</body>
</html>
